import React, { FC, useEffect, useRef, useState } from 'react'
import Mytitle from '../../../../components/Mytitle'
import { Button, Calendar, Col, Form, Input, message, Modal, Result, Row, Select, Table, Tag, Tooltip,Popconfirm } from 'antd';
import { CopyOutlined,CopyrightOutlined ,WhatsAppOutlined,CloseCircleOutlined,FormOutlined} from '@ant-design/icons';
import './index.scss'
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/calendar/locale/zh_CN.js'
import { reg } from '../../../../utils/validate';
import {inject,observer} from 'mobx-react'
import { ajax } from '../../../../api';
import { roleList } from '../../../../utils';
moment.locale('zh-cn');
const {Option} = Select 
const { TextArea } = Input;


const  Xueke:FC<any>=({
  uinfo,
  classes
})=> {
  const {userInfo}=uinfo
  const {getClassList,classList,changeclass}=classes
  useEffect(()=>{
    getClassList()
  },[])
  //切换日期组建的显示
  let [flag,setFlag]=useState<boolean>(false)

  //控制弹窗显示
  const [show,setShow] = useState<boolean>(false)
  const [form] = Form.useForm()
  const inp:any=useRef()
  const [value1,setValue1]=useState<any>("")
  const [disabled,setDisabled]=useState<boolean>(true)
  const handleOk=()=>{
     //获取表单的值
  if(!disabled){
    form.validateFields().then(value=>{
      //加入日期
      //还有添加人信息
      value.classTeacher=''
      value.startTime=value1
      value.info=userInfo
      ajax.addclass(value).then(result=>{
        if(result.code==200){
          setShow(false)
          getClassList()
          form.setFieldsValue({classContent:'',word:'',className:''})
          setFlag(false)
          
        }
      })
      console.log(value)
    }).catch(err=>{
      message.error("请输入正确的表单信息")
    })
  }else{
    message.error("请选择日期")
  }
   
  }
  const handleCancel=()=>{
      setShow(false)
    
  }
 
  //点击添加课程
  const changeRole=()=>{
      setShow(true)
  }
  //点击确认删除
  const confirmDel=async(item:any)=>{
    let res = await ajax.classdelete({_id:item._id})
    if(res.code==200){
      //过滤掉被删除的数据
      var list = classList.filter((v:any)=>v._id!=item._id);
      changeclass(list)
    }
  }
  

  //选择日期回调
  const onSelect=(value: any)=>{
    setDisabled(false)
      console.log(value.format('YYYY-MM-DD'));
      setValue1(value.format('YYYY-MM-DD'))
  }
  const columns:any = [
    {
      title: '序号',
      dataIndex: '_v',
      render:(text:any,item:any,index:any)=>{
        return index+1
      },
      align:'center',
      width:'80px'
      
    },
    {
      title: '课程编号',
      dataIndex: 'word',
      align:'center',
      width:'100px'
      
    },
    {
      title: '课程名称',
      dataIndex: 'className',
      width:'200px',
      ellipsis:true
    },
    {
      title: '课程介绍',
      dataIndex: 'classContent',
      align:"left",
      width:'200px',
      ellipsis:true
    },
    {
      title: '开课时间',
      dataIndex: 'startTime',
      align:"center",
      width:'150px',
      ellipsis:true
    },
    {
      title:"发布人"  ,
      align:'center' ,
      dataIndex:"info",
      render(value:any,item:any,index:any){
        return <span> {value.username} </span>
      }
    },
    {
      title:"权限"  ,
      align:'center' ,
      width:"80px",
      dataIndex:"info",
      render(value:any,item:any,index:any){
        return (
          <Tag color={roleList.find(item=>item.value==value.role)?.color}>
            {roleList.find(item=>item.value==value.role)?.label}
          </Tag>
        )
      }
    },
    {
      title:"操作"  ,
      align:'center' ,
      width:"80px",
      render(value:any,item:any,index:any){
        return (
         <div>
           <Tooltip title="点击修改">
                <Button  size="small" shape="circle" icon={<FormOutlined />} type="primary"></Button>
            </Tooltip>
           {
               <Popconfirm
                title="确定删除吗?"
                onConfirm={()=>confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Tooltip title="点击删除">
                  <Button type="primary"  shape="circle" danger icon={<CloseCircleOutlined />} size="small" />
                </Tooltip>
              </Popconfirm>
              }
         </div>
        )
      }
    },
 
  ];
  return (
    <div>
        <Mytitle text="学科管理"></Mytitle>
        <div>
          <Button type="primary" onClick={changeRole}>添加课程</Button>
          <hr/>
          <div style={{marginTop:"10px"}}>
          <Table dataSource={classList} rowKey={record => record._id} columns={columns} pagination={{pageSize:4}} />
          </div>
        
        </div>
       
        {/* 弹出修改框 */}
        <Modal  
            title="新增课程" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定添加"
            cancelText="取消"
            okType="danger"
        >
          
          <Form
          name="basic"
          form={form}
          layout={"vertical"}
          >
              <Form.Item
            name="word"
            label="课程编号"
            rules={[{ required: true, message: '请输入课程编号' },{pattern:reg.code,message:"请4位课程编码"}]}
          >
            <Input 
          prefix={<CopyrightOutlined />}
          placeholder="请输入4位课程编号"
          allowClear
          />
          </Form.Item>
            <Form.Item
            name="className"
            label="课程名称"
            rules={[{ required: true, message: '请输入增添课程' }]}
          >
            <Input 
          prefix={<CopyOutlined />}
          placeholder="请输入课程名称"
          allowClear
          />
          </Form.Item>
        <Form.Item
                name="classContent"
                label="课程介绍"
                rules={[{ required: true, message: '请输入课程内容' }]}
            >
                <TextArea  placeholder="课程内容" />
            </Form.Item>
           
            <Row>
            <Col span={11}>
            <Input 
            prefix={<WhatsAppOutlined className="site-form-item-icon" />}
            placeholder="请选择日期"
            disabled={disabled}
            ref={inp}
            value={value1}
            />
            </Col>      
            <Col span={11} offset={2}>
            <Button type="primary" onClick={()=>setFlag(!flag)}>选择日期</Button>
                {
                flag&&<div className="site-calendar-demo-card">
                <Calendar locale={locale}  fullscreen={false} onSelect={onSelect}  />
                </div>
                }
            </Col>
        </Row>
        </Form>
          
        </Modal>
    </div>
  )
}

export default inject('uinfo','classes')(observer(Xueke))

